<template>
  <div>
    <div class="jz ddisp" style="width: 1200px;min-width: 1200px;padding:20px">
      <div class="dyy topdq" style="width: 180px">
        <div  class="ba jz_flex" style="">
          职教榜样
        </div>
        <div class="fz_18">
          <div style="padding: 20px 0;background-color: #f0f2fc">
            <span class="em fz_20" style="padding: 10px 0 10px 8px;border-left: 6px solid #3c55a7;color: #3c55a7">榜样园丁</span>
          </div>
          <div class="tabAdd">
            <div @click="add(yuandingzhongzhiList)" class="tabHover">
              <span class="animate__animated animate__bounce">中职</span>
            </div>
            <div @click="add(yuandinggaozhiList)" class="tabHover">
              <span class="animate__animated animate__bounce">高职</span>
            </div>
          </div>
          <div style="padding: 20px 0;background-color: #f0f2fc">
            <span class="em fz_20" style="padding: 10px 0 10px 8px;border-left: 6px solid #3c55a7;color: #3c55a7">榜样学生</span>
          </div>
          <div class="tabAdd">
            <div @click="add(xueshengzhongzhiList)" class="tabHover">
              <span class="animate__animated animate__bounce">中职</span>
            </div>
            <div @click="add(xueshenggaozhiList)" class="tabHover">
              <span class="animate__animated animate__bounce">高职</span>
            </div>
          </div>

        </div>
      </div>
      <div class="topdq" style="width: calc(100% - 180px)">
        <div class="wh_9 jz">
          <div class="blue_jb pad_10_0">
            <span class="mag_l-10 xsgb" @click="pageTo(item)" v-for="(item,index) in daohang" :key="index">{{ item.tit }} > </span>
          </div>
          <div class="ddisp hh mag_t-20">
            <div class="wh_2-5" v-for="(item,index) in list" :key="index">
              <div class="wh_9 jz">
                <div class="img_100">
                  <img style="height: 110px" :src="$store.state.imageUrltitle+item.image" alt="">
                </div>
                <div class="ccsl_1 hh" style="height: 18px">{{item.title}}</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {getArticle} from "@/api/api";

export default {
  name: "shidian",
  data(){
    return{
      daohang:[
        {tit:'首页',path:'homeList'},
        {tit:'职教榜样',path:'renwu'}
      ],
      renwuList:[],
      list:[],
      yuandingzhongzhiList:[],
      yuandinggaozhiList:[],
      xueshengzhongzhiList:[],
      xueshenggaozhiList:[]
    }
  },
  methods:{
    renwu(){

    },
    yuandingzhongzhi(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.yuandingzhongzhiList=res.data
          this.list=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    yuandinggaozhi(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.yuandinggaozhiList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    xueshengzhongzhi(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.xueshengzhongzhiList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    xueshenggaozhi(e){
      let params = {
        cid:e
      };
      getArticle(params).then(res => {
        if (res.status==200) {
          this.xueshenggaozhiList=res.data
        } else {
          console.log(res.msg)
        }
      });
    },
    add(e){
      this.list = e
    },
    pageTo(e){
      if (e.path=='renwu'){
        this.shidian(375)
      }else{
        this.$router.push(e.path)
      }
    },
  },
  mounted() {
    this.yuandingzhongzhi(416)
    this.yuandinggaozhi(417)
    this.xueshengzhongzhi(418)
    this.xueshenggaozhi(419)
  },
  // watch:{
  //   $route(n,o){
  //     if(n.fullPath !== o.fullPath){ //监听路由参数是否变化
  //        location.reload()
  //       // console.log('???????????????')
  //       // this.shidian(375)
  //       // this.renwuList=this.renwuList
  //       //强制刷新页面this.获取列表页()
  //     }
  //   }
  // }
}
</script>

<style scoped>
.ba{
  background-image: url('../../assets/img/shidian.png');
  font-size: 24px;
  height: 74px;
  color: white;
}
.tabHover:hover>span{
  padding: 10px 40px;
  background-color:#3c55a7;
  border-radius: 10px;
  color: white;
  cursor: pointer;
}
.tabAdd{
  background-color: #f0f2fc;
}
.tabAdd>div{
  height: 60px;
  display: flex;
  justify-content:center;
  align-items: center;
}
</style>